<template>
  <div>
    <!-- 头部 -->
    <el-header class="primaryColor">
      <el-color-picker
        @change="colorChange"
        v-model="colors.primary"
        class="arrow"
      ></el-color-picker>
      <!-- 标题 -->
      <div class="diva">
        <i class="el-icon-s-fold" @click="open"></i>
        <h1>后台管理系统</h1>
      </div>
      <!-- 下拉菜单 -->
      <!-- 全屏放大 -->
      <div class="btn-fullscreen" @click="handleFullScreen">
        <el-tooltip
          effect="dark"
          :content="fullscreen ? `取消全屏` : `全屏`"
          placement="bottom"
        >
          <i
            class="el-icon-rank"
            style="font-size: 30px; padding-right: 10px;color:white"
          ></i>
        </el-tooltip>
      </div>
      <el-dropdown class="divb">
        <div class="demo-type">
          <div>
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            ></el-avatar>
          </div>
        </div>
        <span class="el-dropdown-link">
          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>退出登陆</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
  </div>
</template>

<script>
import generateColors from "@/plugins/color";
import objectAssign from "object-assign";
import bus from "@/uilts/bus.js";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      opena: false,
      originalStylesheetCount: -1, //记录当前已引入style数量
      originalStyle: "", //获取拿到的.css的字符串
      colors: {
        //颜色选择器默认颜色值,这个值要和element-variables一样
        primary: "#409EFF",
      },
      // primaryColor: "", //提交成功后设置默认颜色
      cssUrl: [
        "//unpkg.com/element-ui/lib/theme-chalk/index.css",
        "./static/css/index.css",
      ],
      fullscreen: false,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下
    let that = this;
    // 如果是记住用户的状态就需要，在主题切换的时候记录颜色值，在下次打开的时候从新赋值
    this.colors.primary = localStorage.getItem("color") || this.colors.primary; //例如
    this.getIndexStyle(this.cssUrl[0]);
    setTimeout(function () {
      if (that.originalStyle) {
        return;
      } else {
        that.getIndexStyle(that.cssUrl[1]);
      }
    }, 2000);
    this.$nextTick(() => {
      // 获取页面一共引入了多少个style 文件
      this.originalStylesheetCount = document.styleSheets.length;
    });
  },
  methods: {
    open() {
      let opena = !this.opena;
      this.opena = opena;
      bus.$emit("open", opena);
    },
    colorChange(e) {
      if (!e) return;
      localStorage.setItem("color", e);
      this.primaryColor = this.colors.primary;
      this.colors = objectAssign(
        {},
        this.colors,
        generateColors(this.colors.primary)
      );
      this.writeNewStyle();
    },
    writeNewStyle() {
      let cssText = this.originalStyle;
      Object.keys(this.colors).forEach((key) => {
        cssText = cssText.replace(
          new RegExp("(:|\\s+)" + key, "g"),
          "$1" + this.colors[key]
        );
      });
      if (this.originalStylesheetCount === document.styleSheets.length) {
        // 如果之前没有插入就插入
        const style = document.createElement("style");
        style.innerText =
          ".primaryColor{background-color:" +
          this.colors.primary +
          "}" +
          cssText;
        document.head.appendChild(style);
      } else {
        // 如果之前没有插入就修改
        document.head.lastChild.innerText =
          ".primaryColor{background-color:" +
          this.colors.primary +
          "} " +
          cssText;
      }
    },
    getIndexStyle(url) {
      let that = this;
      var request = new XMLHttpRequest();
      request.open("GET", url);
      request.onreadystatechange = function () {
        if (
          request.readyState === 4 &&
          (request.status == 200 || request.status == 304)
        ) {
          // 调用本地的如果拿不到会得到html,html是不行的
          if (request.response && !/DOCTYPE/gi.test(request.response)) {
            that.originalStyle = that.getStyleTemplate(request.response);
            that.writeNewStyle();
          } else {
            that.originalStyle = "";
          }
        } else {
          that.originalStyle = "";
        }
      };
      request.send(null);
    },
    getStyleTemplate(data) {
      const colorMap = {
        "#3a8ee6": "shade-1",
        "#409eff": "primary",
        "#53a8ff": "light-1",
        "#66b1ff": "light-2",
        "#79bbff": "light-3",
        "#8cc5ff": "light-4",
        "#a0cfff": "light-5",
        "#b3d8ff": "light-6",
        "#c6e2ff": "light-7",
        "#d9ecff": "light-8",
        "#ecf5ff": "light-9",
      };
      Object.keys(colorMap).forEach((key) => {
        const value = colorMap[key];
        data = data.replace(new RegExp(key, "ig"), value);
      });
      return data;
    },
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
  },
};
</script>

<style lang='scss' scoped>
// 头部样式
.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-dropdown-link {
  color: white;
}
// 左边小图标
.diva {
  color: white;
  display: flex;
  align-items: center;
  > i {
    font-size: 30px;
    margin-right: 30px;
  }
}
.divb {
  display: flex;
  align-items: center;
}
.arrow {
  left: 300px;
  position: absolute;
}
.demo-type {
  padding-right: 10px;
}
// 全屏放大的
.btn-fullscreen{
  position: absolute;
  right: 140px;
}
</style>
